<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
             active-text-color="#ff9d00"
              router>
      <el-menu-item >文章</el-menu-item>
      <el-menu-item index="/publish" style="float: right; border: 1px solid black; border-radius: 4px;
                                        background-color: #ff9d00; color: white; height: 40px; line-height: 40px;
                                         margin-right: 10px; margin-top: 10px">
        <i class="el-icon-edit" style="color: white"></i> 写游记
      </el-menu-item>
    </el-menu>
    <div class="line"></div>
    <div style="margin-top: 20px">
      <ul>
        <li v-for="item in articles" v-show="item.isDeleted == 0">
          <ArticleComponent :article="item" style="display:inline-block; width: 800px; margin-left: -50px"></ArticleComponent>
          <div style="display: inline-block;">
            <table  cellspacing="14" style="line-height: 43px;" >
              <tr>
                <td><el-button type="primary" style="border-radius: 4px;  height: 40px; font-size: 14px" @click="handlePreview(item)">
                  <i class="el-icon-view">&nbsp;&nbsp;预&nbsp;&nbsp;&nbsp;览</i>
                </el-button></td>
                <td><el-button type="warning" style="border-radius: 4px;  height: 40px; font-size: 14px " @click=getArticlePublishById(item.id)>
                  <i class="el-icon-edit">&nbsp;&nbsp;编&nbsp;&nbsp;&nbsp;辑</i>
                </el-button></td>
              </tr>
              <tr>
                <td>
                  <el-popconfirm
                      style="margin-left: 10px"
                      confirm-button-text='确定'
                      cancel-button-text='我再想想'
                      icon="el-icon-info"
                      icon-color="red"
                      title="确定删除吗？"
                      @confirm="remove(item)"
                  >
                    <el-button type="danger" slot="reference" style="border-radius: 4px; height: 40px; font-size: 14px; margin-left: -10px">
                      <i class="el-icon-close">&nbsp;&nbsp;删&nbsp;&nbsp;&nbsp;除</i>
                    </el-button>
                  </el-popconfirm>
                </td>

                <td><el-button type="info" style="border-radius: 4px">
                  <el-switch
                      v-model="item.show_status"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      style="width: 35px">
                  </el-switch>
                  <span v-show="item.show_status" style="font-size: 14px">
                    公&nbsp;开
                  </span>
                  <span v-show="!item.show_status" style="font-size: 14px">
                    私&nbsp;密
                  </span>
                </el-button></td>
              </tr>
            </table>
          </div>
        </li>
      </ul>
    </div>
      <el-dialog
          :title="this.previewTitle"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose">
        <el-card>
          <mavon-editor class="md"
                        :value="this.previewContent"
                        :subfield = "false"
                        defaultOpen = "preview"
                        :toolbarsFlag = "false"
                        :editable="false"
                        :scrollStyle="true"
                        :ishljs="true"
          ></mavon-editor>

        </el-card>
      </el-dialog>
  </div>
</template>

<script>
import ArticleComponent from "@/components/Article/ArticleComponent";
export default {
  name: "PersonArticle",
  components:{
    ArticleComponent
  },
  data(){
    return{
      value: true,
      nickName: "",
      dialogVisible: false,
      previewContent:  "",
      previewTitle: "",
      articles: []
    }
  },
  created() {
    this.nickName = localStorage.getItem("nickName")
    this.articles = [
      {
        id: 123,
        title: "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长：",
        coverImage: "https://p1-q.mafengwo.net/s19/M00/AA/AE/CoNHGWPwYIRhHU70AAegN6c766k.jpeg?imageMogr2%2Fstrip",
        avatar: "https://p.qqan.com/up/2021-6/16246735796128385.png",
        userName: this.nickName,
        content: "北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。是鸟也，海运则将徙于南冥。南冥者，天池也。《齐谐》者，志怪者也。《谐》之言曰：“鹏之徙于南冥也，水击三千里，抟扶摇而上者九万里，去以六月息者也。”野马也，尘埃也，生物之以息相吹也。天之苍苍，其正色邪？其远而无所至极邪？其视下也，亦若是则已矣。且夫水之积也不厚，则其负大舟也无力。覆杯水于坳堂之上，则芥为之舟；置杯焉则胶，水浅而舟大也。风之积也不厚，则其负大翼也无力。故九万里，则风斯在下矣，而后乃今培风；背负青天，而莫之夭阏者，而后乃今将图南。蜩与学鸠笑之曰：“我决起而飞，抢榆枋而止，时则不至，而控于地而已矣，奚以之九万里而南为？”适莽苍者，三餐而反，腹犹果然；适百里者，宿舂粮；适千里者，三月聚粮。之二虫又何知！小知不及大知，小年不及大年。奚以知其然也？朝菌不知晦朔，蟪蛄不知春秋，此小年也。楚之南有冥灵者，以五百岁为春，五百岁为秋；上古有大椿者，以八千岁为春，八千岁为秋。此大年也。而彭祖乃今以久特闻，众人匹之，不亦悲乎？\n" +
            "\n" +
            "2\n" +
            "汤之问棘也是已：“穷发之北，有冥海者，天池也。有鱼焉，其广数千里，未有知其修者，其名为鲲。有鸟焉，其名为鹏，背若泰山，翼若垂天之云；抟扶摇羊角而上者九万里，绝云气，负青天，然后图南，且适南冥也。斥鷃笑之曰：‘彼且奚适也？我腾跃而上，不过数仞而下，翱翔蓬蒿之间，此亦飞之至也。而彼且奚适也？’”此小大之辩也。\n" +
            "\n" +
            "3\n" +
            "故夫知效一官、行比一乡、德合一君、而征一国者，其自视也，亦若此矣。而宋荣子犹然笑之。且举世誉之而不加劝，举世非之而不加沮，定乎内外之分，辩乎荣辱之境，斯已矣。彼其于世，未数数然也。虽然，犹有未树也。夫列子御风而行，泠然善也，旬有五日而后反。彼于致福者，未数数然也。此虽免乎行，犹有所待者也。若夫乘天地之正，而御六气之辩，以游无穷者，彼且恶乎待哉？故曰：至人无己，神人无功，圣人无名。",
        updateTime: "2023-2-24 14:30",
        likesNumber: 12138,
        tags: ["前端", "后端", "运维"],
        show_status: true,
        isDeleted: 0,
      },
      {
        id: 123,
        title: "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长：",
        coverImage: "https://p1-q.mafengwo.net/s19/M00/AA/AE/CoNHGWPwYIRhHU70AAegN6c766k.jpeg?imageMogr2%2Fstrip",
        avatar: "https://p.qqan.com/up/2021-6/16246735796128385.png",
        userName: this.nickName,
        content: "北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。是鸟也，海运则将徙于南冥。南冥者，天池也。《齐谐》者，志怪者也。《谐》之言曰：“鹏之徙于南冥也，水击三千里，抟扶摇而上者九万里，去以六月息者也。”野马也，尘埃也，生物之以息相吹也。天之苍苍，其正色邪？其远而无所至极邪？其视下也，亦若是则已矣。且夫水之积也不厚，则其负大舟也无力。覆杯水于坳堂之上，则芥为之舟；置杯焉则胶，水浅而舟大也。风之积也不厚，则其负大翼也无力。故九万里，则风斯在下矣，而后乃今培风；背负青天，而莫之夭阏者，而后乃今将图南。蜩与学鸠笑之曰：“我决起而飞，抢榆枋而止，时则不至，而控于地而已矣，奚以之九万里而南为？”适莽苍者，三餐而反，腹犹果然；适百里者，宿舂粮；适千里者，三月聚粮。之二虫又何知！小知不及大知，小年不及大年。奚以知其然也？朝菌不知晦朔，蟪蛄不知春秋，此小年也。楚之南有冥灵者，以五百岁为春，五百岁为秋；上古有大椿者，以八千岁为春，八千岁为秋。此大年也。而彭祖乃今以久特闻，众人匹之，不亦悲乎？\n" +
            "\n" +
            "2\n" +
            "汤之问棘也是已：“穷发之北，有冥海者，天池也。有鱼焉，其广数千里，未有知其修者，其名为鲲。有鸟焉，其名为鹏，背若泰山，翼若垂天之云；抟扶摇羊角而上者九万里，绝云气，负青天，然后图南，且适南冥也。斥鷃笑之曰：‘彼且奚适也？我腾跃而上，不过数仞而下，翱翔蓬蒿之间，此亦飞之至也。而彼且奚适也？’”此小大之辩也。\n" +
            "\n" +
            "3\n" +
            "故夫知效一官、行比一乡、德合一君、而征一国者，其自视也，亦若此矣。而宋荣子犹然笑之。且举世誉之而不加劝，举世非之而不加沮，定乎内外之分，辩乎荣辱之境，斯已矣。彼其于世，未数数然也。虽然，犹有未树也。夫列子御风而行，泠然善也，旬有五日而后反。彼于致福者，未数数然也。此虽免乎行，犹有所待者也。若夫乘天地之正，而御六气之辩，以游无穷者，彼且恶乎待哉？故曰：至人无己，神人无功，圣人无名。",
        updateTime: "2023-2-24 14:30",
        likesNumber: 12138,
        tags: ["前端", "后端", "运维"],
        show_status: 0,
        isDeleted: 0
      },
    ]
    var isPublish = localStorage.getItem("article") != null ? true : false
    console.log(isPublish)
    if (isPublish == true){
      var publisharticle = JSON.parse(localStorage.getItem("article"))
      publisharticle.isDeleted = 0
      this.articles.push(publisharticle)
    }
    console.log(this.articles)
  },
  methods:{
    getArticlePublishById: function (id){
      this.$router.push({path: '/publish/'+id})
    },
    handlePreview: function (item) {
      console.log(item)
      this.previewContent = item.content
      this.previewTitle = item.title
      this.dialogVisible = true;
    },
    handleEdit: function (item){
      // 跳转到文章编辑页面
    },
    remove: function (item){
      // 调用后端删除接口
      item.isDeleted = 1
    }
  }
}
</script>

<style scoped>

</style>